<template>
	<view class="jet">
		<view class="top" src="/static/bg.png">
			<view class="header">
				<view class="header-title">Remove Account</view>
			</view>
			<view class="middle">
				<image class="middle-logo" src="/static/lougo.png"></image>
				<image class="middle-name" src="/static/Jetpeso.png"></image>
			</view>
			<view class="content">
				<view class="content-view">
					<image class="content-view-left" src="/static/flb.png"></image>
					<view class="content-view-qh">+63</view>
					<input type="number" maxlength="10" class="content-view-text ml60" placeholder="9XXXXXXXXX"
						v-model="tel" />
				</view>
				<view class="content-view mt24" style="margin-top: 50rpx;">
					<input type="number" :password="ispwd" maxlength="6" placeholder="Enter 6-digit password"
						class="content-view-text" v-model="password" />
					<image @tap="open" class="content-view-right"
						:src="ispwd ? '/static/1.png':'/static/2.png'"></image>
				</view>
			</view>
			<view class="button" @click="delAccout">
				REMOVE
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				tel: '',
				password: '',
				ispwd: true,
			}
		},
		methods: {
			delAccout() {
				if (this.tel.length == 0) {
					return uni.showToast({
						title: 'Please Enter phone number',
						icon: 'none'
					})
				}
				if (this.password.length == 0) {
					return uni.showToast({
						title: 'Please Enter 6-digit password',
						icon: 'none'
					})
				}

				uni.showLoading({
					title: 'loading...',
					mask: true
				})
				const _this = this
				uni.request({
					url: 'https://api.jetpso.com/Sv/CustomLogin/cancel_client_data',
					method: 'POST',
					data: {
						tel: this.tel,
						password: this.password
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}
				}).then(res => {
					console.log("res===", res);
					uni.hideLoading()
					uni.showToast({
						icon: 'none',
						title: res.data.msg
					})
					_this.tel = ''
					_this.password = ''
				}).catch(e => {
					console.log("e===", e);
					uni.hideLoading()
				})

			},
			open() {
				this.ispwd = !this.ispwd
			}
		}
	}
</script>

<style scoped lang="scss">
	.jet {
		width: 100vw;
		min-height: 100vh;
	}

	.top {
		background-image: url(/static/jbg.png);
		background-size: 100% 100%;
		width: 750rpx;
		height: 750rpx;
		padding-top: 30rpx;
		box-sizing: border-box;
		
	}

	.header {
		width: 100vw;
		height: 46rpx;
		display: flex;
		flex-direction: row;

	}
	.header-title {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 18px;
		color: #fff;
		text-align: center;
		font-style: normal;
		text-transform: none;
		flex: 1;
		line-height: 46rpx;
		height: 46rpx;
	
	}

	.middle-logo {
		margin-top: 2rpx;
		width: 160rpx;
		height: 160rpx;
		border-radius: 30rpx;
	}

	.middle-name {
		padding-top: 50rpx;
		height: 36rpx;
		width: 144rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 24px;
		text-align: center;
		font-style: normal;
	}

	.middle {
		margin-top: 26rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.mt24 {
		padding-top: 34rpx;
	}
	
	.ml60 {
		margin-left: 60rpx;
	}
	
	.content {
		margin-top: 0rpx;
		width: 100vw;
		height: 234px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

	}
	
	.content-view {
		width: calc(100vw - 100rpx);
		margin: 0 50rpx;
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		border: 1px solid #EEEEEE;
		display: flex;
		flex-direction: row;
		padding: 0rpx 28rpx;
	
		
	}
	
	.content-view-left {
		width: 60rpx;
		height: 40rpx;
		margin-top: 27rpx;
	}
		
	.content-view-qh {
		margin-left: 12rpx;
		width: 56rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 15px;
		color: #333333;
		line-height: 96rpx;
		height: 96rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
		
	.content-view-text {
		margin: 25rpx 0rpx;
		height: 46rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #8E8E8E;
		flex: 1;
	}
		
	.content-view-right {
		width: 40rpx;
		height: 40rpx;
		margin-top: 28rpx;
	}

	.button {
		margin: 90rpx 50rpx 0rpx;
		height: 96rpx;
		background: linear-gradient(136deg, #4B8FF2 0%, #4663F4 100%);
		border-radius: 28rpx;

		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 96rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
</style>